<template>
  <div>
    <div>
      <el-form ref="elForm" :model="form" size="medium" label-width="100px">
        <!-- 访视时间 -->
        <el-form-item label="访视时间">
          <el-date-picker
            v-model="form.visitDate"
            type="datetime"
            placeholder="请选择访视时间"
            format="yyyy-MM-dd HH:mm"
            value-format="yyyy-MM-dd HH:mm"
            :disabled="this.isModel"
            :picker-options="{
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      }"
          ></el-date-picker>
        </el-form-item>

        <!-- NRS评分 -->
        <el-form-item label="NRS评分：">
          <el-row>
            <el-col :span="12">
              静息评分：
              <el-select v-model="form.nrsRest" placeholder="请选择评分" :disabled="this.isModel">
                <el-option v-for="n in 11" :key="n" :label="n-1" :value="n-1"></el-option>
              </el-select>
            </el-col>
            <el-col :span="12">
              运动评分：
              <el-select v-model="form.nrsActivity" placeholder="请选择评分" :disabled="this.isModel">
                <el-option v-for="n in 11" :key="n" :label="n-1" :value="n-1"></el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item>
          <el-alert
            title="NRS评分量表：用数字式0~10代替文字来表示的疼痛程度。将一条直线等分为10段，按0~10分次序评估疼痛程度。数字越大代表疼痛程度越大。0分：无痛 1~3分：轻度疼痛 4~6分：中度疼痛 7~10分：重度疼痛"
            type="info"
            show-icon
          ></el-alert>
        </el-form-item>

        <!-- 睡眠满意度评分 -->
        <el-form-item label="睡眠满意度评分：" label-width="auto">
          <el-select v-model="form.sleepSatis" placeholder="请选择评分" :disabled="this.isModel">
            <el-option v-for="n in 11" :key="n" :label="n-1" :value="n-1" ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-alert
            title="睡眠满意度：8~10分：非常满意；5~7分：满意；2~4分：一般；0~1分：不满意"
            type="info"
            show-icon
          ></el-alert>
        </el-form-item>
      </el-form>
    </div>


    <!--  患者访视  -->
    <div style="color: #169bd5; margin: 10px 0 5px 10px">
      患者访视（0-24h）
    </div>
    <el-card>
      <!-- 排便 -->
      <el-form ref="elForm" :model="form" size="medium" style="font-size: 20px">
        <el-form-item label="是否排便:" label-position="left">
          <el-radio-group v-model="form.bowelCheck" style="margin-bottom: 10px" :disabled="this.isModel">
            <el-radio label="true">是</el-radio>
            <el-radio label="false" style="margin-top: 10px">否</el-radio>
          </el-radio-group>

          <span v-show="form.bowelCheck === 'true'" style="margin-left: 10px">
        疼痛评分:
        <el-select v-model="form.bowelHurt" placeholder="请选择评分" style="width: 30%" :disabled="this.isModel">
          <el-option v-for="n in 11" :key="n" :label="n" :value="n"></el-option>
        </el-select>
        时间:
        <el-time-select
          v-model="form.bowelTime"
          :disabled="this.isModel"
          :picker-options="{
            start: '00:00',
            step: '00:15',
            end: '23:59'
          }"
          placeholder="请选择时间"
          style="width: 30%"
        ></el-time-select>
      </span>
        </el-form-item>

        <!-- 下床活动 -->
        <el-form-item label="是否下床活动:" label-position="left">
          <el-radio-group v-model="form.outBed" style="margin-bottom: 10px" :disabled="this.isModel">
            <el-radio label="true">是</el-radio>
            <el-radio label="false" style="margin-top: 10px">否</el-radio>
          </el-radio-group>

          <span v-show="form.outBed === 'true'" style="margin-left: 10px">
        疼痛评分:
        <el-select v-model="form.bedHurt" placeholder="请选择评分" style="width: 30%" :disabled="this.isModel">
          <el-option v-for="n in 11" :key="n" :label="n" :value="n"></el-option>
        </el-select>
        时间:
        <el-time-select
          v-model="form.bedTime"
          :picker-options="{
            start: '00:00',
            step: '00:15',
            end: '23:59'
          }"
          :disabled="this.isModel"
          placeholder="请选择时间"
          style="width: 30%"
        ></el-time-select>
      </span>
        </el-form-item>

        <!-- 是否追加曲马多 -->
        <el-form-item label="是否追加曲马多（当NRS≥4分追加50-100mg）:" label-position="left">
          <el-radio-group v-model="form.qumaduo" style="margin-bottom: 10px" :disabled="this.isModel">
            <el-radio label="true">是</el-radio>
            <el-radio label="false" style="margin-top: 10px">否</el-radio>
          </el-radio-group>

          <span v-show="form.qumaduo === 'true'" style="margin-left: 10px" :disabled="this.isModel">
        追加剂量:
        <input style="width: 30%; outline: none; border: none;border-bottom: 1px solid" v-model="form.quDose">mg
        追加时间:
        <el-date-picker
          v-model="form.quTime"
          type="datetime"
          placeholder="请选择时间"
          format="MM-dd HH:mm"
          value-format="MM-dd HH:mm"
          style="width: 30%"
          :disabled="this.isModel"
        ></el-date-picker>
      </span>
        </el-form-item>

        <!-- 术后24小时 -->
        <el-form-item label="术后0-24h使用镇痛药物情况 :" label-position="left">
        </el-form-item>

        <div v-show="addMed === true || form.medName != null" style="font-size: 14px" >
          药物名称
          <input style="width: 30%;  outline: none; border: none;border-bottom: 1px solid" v-model="form.medName" :disabled="this.isModel">
          使用剂量
          <input style="width: 10%; outline: none; border: none;border-bottom: 1px solid" v-model="form.analDose" :disabled="this.isModel">
          <el-select v-model="form.analMg" placeholder="请选择" size="mini" style="width: 70px" :disabled="this.isModel">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          使用方式:
          <el-radio-group v-model="form.analUse" :disabled="this.isModel">
            <el-radio :label="1">静脉</el-radio>
            <el-radio :label="2">口服</el-radio>
            <el-radio :label="3">肌注</el-radio>
            <el-radio :label="4">其他</el-radio>
            <input v-model="form.analOther" style="width: 10%;border: none;border-bottom: 1px solid"
                   v-show="form.analUse === 4">
          </el-radio-group>
          <i class="el-icon-delete" style="color: red" @click="deleteMed"></i>
        </div>

        <el-button type="primary" icon="el-icon-plus" @click="addMed = true" :disabled="this.isModel">添加药物</el-button>
      </el-form>
    </el-card>

    <div style="color: #169bd5; margin: 10px 0 5px 10px">
      不良事件（术后第1天）
    </div>
    <el-card>
      <el-form ref="blForm" :model="form" size="medium" style="font-size: 20px">
        <el-form-item label="是否有不良反应发生:" label-position="left">
          <el-radio-group v-model="form.buliang" style="margin-top: 10px" :disabled="this.isModel">
            <el-radio v-model="radio" label="false">否</el-radio>
            <p></p>
            <el-radio v-model="radio" label="true" style="margin-top: 10px">是
              <span style="margin-left: 10px" v-show="form.buliang === 'true'">
                <!-- 各种反应 -->
                <div>
                  <el-checkbox label="困倦" v-model="form.adverOne" :disabled="this.isModel"></el-checkbox>
                  <el-checkbox label="恶心" v-model="form.adverTwo" :disabled="this.isModel"></el-checkbox>
                  <el-checkbox label="呕吐" v-model="form.adverThree" :disabled="this.isModel"></el-checkbox>
                  <el-checkbox label="头晕" v-model="form.adverFour" :disabled="this.isModel"></el-checkbox>
                  <el-checkbox label="嗜睡" v-model="form.adverFive" :disabled="this.isModel"></el-checkbox>
                  <el-checkbox label="尿潴留" v-model="form.adverSix" :disabled="this.isModel"></el-checkbox>
                  <el-checkbox label="皮肤瘙痒" v-model="form.adverSeven" :disabled="this.isModel"></el-checkbox>
                  <el-checkbox label="便秘" v-model="form.adverEight" :disabled="this.isModel"></el-checkbox>
                </div>

              </span>
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <span style="margin-left: 10px" v-show="form.buliang === 'true'">
          <el-form-item label="是否与试验药物相关性: " label-position="left">
            <el-radio-group v-model="form.medConnect" :disabled="this.isModel">
              <el-radio v-model="radio" label="realCon">
                肯定有关
              </el-radio>
              <el-radio v-model="radio" label="maybeCon">
                很可能有关
              </el-radio>
              <el-radio v-model="radio" label="someReal">
                可能有关
              </el-radio>
              <el-radio v-model="radio" label="maybeNot">
                可能无关
              </el-radio>
              <el-radio v-model="radio" label="realNot">
                肯定无关
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否干预: " label-position="left">
            <el-radio-group v-model="form.ganYu" :disabled="this.isModel">
            <el-radio v-model="radio" label="false">否</el-radio>
              <el-radio v-model="radio" label="true">是
                <span style="margin-left: 10px" v-show="form.ganYu === 'true'">
                    干预方式: <input style="width: 100%; outline: none; border: none;border-bottom: 1px solid" v-model="form.howGan">
                </span>
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="不良事件结局: " label-position="left">
            <el-radio-group v-model="form.jieJu" :disabled="this.isModel">
              <el-radio v-model="radio" label="still">仍存在</el-radio>
              <el-radio v-model="radio" label="ok">已缓解</el-radio>
              <el-radio v-model="radio" label="dontKnow">不知道</el-radio>
            </el-radio-group>
          </el-form-item>

        </span>
      </el-form>
    </el-card>


    <el-row :gutter="24" style="width: 100%;margin-left: 30%;margin-top: 10px" v-show="!this.uploadLock">
      <el-col :span="8">
        <el-button @click="cancelForm">取消</el-button>
      </el-col>
      <el-col :span="8">
        <el-button type="primary" @click="submitForm">保存</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {addCrfTwo, listCrfTwo, updateCrfTwo} from "@/api/crfTwo/crfTwo";

export default {
  components: {},
  props: [],
  data() {
    return {
      isModel: false,
      uploadLock: true,
      addMed: false,
      form: {
        visitDate: '', // 当前系统时间
        nrsRest: null, // 静息评分
        nrsActivity: null, // 运动评分
        sleepSatis: null,
        bowelCheck: '',//是否排便
        bowelHurt: '',//排便疼痛
        bowelTime: '',//排便时间
        bedTime: '',
        bedHurt: '',
        outBed: '',//以上为下床类数据
        wounds: '',
        quDose: '',
        quTime: '',
        qumaduo: '',//曲马多
        analUse: '',//镇静药使用
        analOther: '',
        analDose: '',
        analMg: '',//镇静剂单位
        adverOne: '',
        adverTwo: '',
        adverThree: '',
        adverFour: '',
        adverFive: '',
        adverSix: '',
        adverSeven: '',
        adverEight: '',
        buliang: "",//以上很多为不良反应
        howGan: '',
        ganYu: "",//以上为干预
        medConnect: "",//药物相关性
        jieJu: "",//药物结局
        medName: null,//药品名称
        status: "" //状态
      },
      options: [{
        value: 'none',
        label: '请选择'
      }, {
        value: 'mg',
        label: 'mg'
      }, {
        value: 'μg',
        label: 'μg'
      }, {
        value: 'g',
        label: 'g'
      },],
      radio: '',
    }
  },
  computed: {},
  watch: {},

  created() {
    if (this.$route.query.id && this.$route.query.f === '1') {
      this.uploadLock = false
    }else{
      this.isModel = true;
    }

    if (this.$route.query.id != null) {
      listCrfTwo(this.$route.query.id).then(res => {
        console.log(res)
        if (res) {
          this.form = res
          if (this.form.adverOne === 'true') {
            this.form.adverOne = true
          }
          if (this.form.adverTwo === 'true') {
            this.form.adverTwo = true
          }
          if (this.form.adverThree === 'true') {
            this.form.adverThree = true
          }
          if (this.form.adverFour === 'true') {
            this.form.adverFour = true
          }
          if (this.form.adverFive === 'true') {
            this.form.adverFive = true
          }
          if (this.form.adverSix === 'true') {
            this.form.adverSix = true
          }
          if (this.form.adverSeven === 'true') {
            this.form.adverSeven = true
          }
          if (this.form.adverEight === 'true') {
            this.form.adverEight = true
          }
        }
      })
    }
  },
  mounted() {
  },
  methods: {
    submitForm() {
      this.form.status = 1;
      this.form.testerId = this.$route.query.id
      listCrfTwo(this.$route.query.id).then(res => {
        // console.log(res)
        if (res) {
          updateCrfTwo(this.form).then(res => {
            console.log("修改了")
            this.$message.success("修改成功");
          })
        } else {
          addCrfTwo(this.form).then(res => {
            console.log("提交了")
            this.$message.success("提交成功");
          })
        }
      })
    },
    cancelForm() {
      this.$router.go(-1);
    },
    deleteMed() {
      this.form.medName = null;
      this.form.analDose = null;
      this.form.analMg = null;
      this.form.analUse = null;
      this.form.analOther = null;
      this.addMed = false;  // 同时关闭添加药物的状态
      console.log(this.form)
    },
  }
}

</script>
<style>
</style>
